import type { Report } from "@server/src/schemas/reports";
import { isThisMonth, isThisWeek, isToday, isYesterday } from "date-fns";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ReportsItem } from "./reports-item";

export function ReportsTimeline({ reports }: { reports: Report[] }) {
  const ranges = {
    today: reports.filter((report) => isToday(report.start)),
    yesterday: reports.filter((report) => isYesterday(report.start)),
    week: reports.filter((report) => isThisWeek(report.start)),
    month: reports.filter((report) => isThisMonth(report.start)),
  };
  const defaultTab =
    (Object.keys(ranges) as Array<keyof typeof ranges>).find((key) => ranges[key].length > 0) ??
    "today";

  return (
    <Tabs defaultValue={defaultTab} className="h-full w-full">
      <TabsList>
        <TabsTrigger value="today" className="capitalize">
          today
        </TabsTrigger>
        <TabsTrigger value="yesterday" className="capitalize">
          yesterday
        </TabsTrigger>
        <TabsTrigger value="week" className="capitalize">
          week
        </TabsTrigger>
        <TabsTrigger value="month" className="capitalize">
          month
        </TabsTrigger>
      </TabsList>
      {Object.entries(ranges).map(([key, list]) => (
        <TabsContent key={key} value={key}>
          <ScrollArea className="h-full w-full">
            <div className="grid h-full w-full flex-1 grid-cols-4 gap-4">
              {list.map((report) => (
                <ReportsItem key={report.id} report={report} />
              ))}
            </div>
          </ScrollArea>
        </TabsContent>
      ))}
    </Tabs>
  );
}
